<template>
  <!--详情内容导航组件-->
  <div class="wrapper">
    <ul>
      <li v-for="(list,index) in data.list" :class="{active: activeIndex == index}">
        <router-link :to=list.link>
          <Icon class="ivu-icon1" type="ios-radio-button-on" size="12"/>
          {{list.list}}
          <Icon class="ivu-icon2" type="ios-arrow-forward"/>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    props: {
      data: {
        type: Object,
      },
      activeIndex: {
        type: Number,
      },
    },
  }
</script>

<style scoped>
  .wrapper > ul li {
    height: 45px;
    line-height: 45px;
    list-style: none;
    padding-left: 25px;
    background: #f3f3f3;
    margin: 1px 0;
  }
  .wrapper > ul > li > a {
    color: #666;
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
    width: 100%;
    height: 100%;
  }
  .wrapper > ul > li > a > .ivu-icon1 {
    padding-right: 20px;
    color: #bbb;
  }
  .wrapper > ul > li > a > .ivu-icon2 {
    padding-left: 70px;
  }
  .active {
    background: #007 !important;
    border-left: 5px solid #D71619;
  }

  .active a, .active a .ivu-icon1 {
    color: #fff !important;
  }
</style>
